لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش React Front to Back 2022 [ویدئو]
React Front to Back 2022 [Video]
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
این دوره با اصول React شامل کامپوننت ها، پایه ها، هوک ها، حالت و غیره شروع می شود. سپس با قلاب های React مانند useState، useEffect، useContext، useReducer و useRef آشنا شوید. بعد، قلاب های سفارشی ایجاد می کنید و React Router v6 را مشاهده می کنید.
سپس، یاد خواهید گرفت که چگونه وضعیت جهانی را با زمینه، کاهنده ها و قلاب ها مدیریت کنید.
شما احراز هویت Firebase 9، پرس و جوها، ذخیره سازی و استقرار برنامه های React را در Vercel و Netlify خواهید دید. انیمیشن اولیه با Framer Motion، پیاده سازی نقشه های Leaflet و اسلایدرهای Swiper و کار بر روی تمام پشته MERN (MongoDB، Express، React، Node.js) از نکات برجسته این دوره است.
تمام این مفاهیم با کمک چهار برنامه/پروژه مختلف به صورت عملی توضیح داده شده اند. اگر قبلا از React استفاده نکردهاید، پروژه Feedback App به شما کمک میکند تا اصول React را بیاموزید. پروژه GitHub Finder با معرفی اقدامات و کاهش دهنده ها، مدیریت وضعیت سطح برنامه را بیشتر بررسی می کند. شما با API های شخص ثالث کار خواهید کرد.
اپلیکیشن House Marketplace شما را با Firebase آشنا میکند و شما را آماده میکند تا اطلاعات زیادی در مورد قابلیتهای آن بهعنوان پلتفرمی برای احراز هویت کاربر، ذخیرهسازی فایلهای ابری و پایگاه داده اختصاصی NoSQL بیاموزید. در نهایت، پروژه نهایی (فول استک سیستم بلیط پشتیبانی MERN) یک برنامه تمام عیار کامل است که از Redux و Redux Toolkit استفاده می کند.
در پایان دوره، شما چهار پروژه با تمام مفاهیم آموزش داده شده ساخته اید. همچنین اعتماد به نفس و مهارت کافی برای شروع سفر خود را با React به دست خواهید آورد.
همه فایلهای منبع به مخزن GitHub در آدرس زیر اضافه میشوند: https://github.com/packtpublishing/react-front-to-back آموزش اصول React از جمله کامپوننتها، قطعات، قلابها، وضعیت
قلاب های React و نحوه ایجاد قلاب های سفارشی را بیاموزید
وضعیت جهانی را با زمینه، کاهنده ها و قلاب ها مدیریت کنید
نحوه استفاده از زمینه و کاهش دهنده ها برای مدیریت وضعیت جهانی را بیاموزید
به احراز هویت Firebase 9 و انیمیشن اولیه با Framer Motion نگاه کنید
استقرار برنامههای React در Vercel و Netlify این دوره برای کسانی است که میخواهند React را از ابتدا یاد بگیرند و توسعهدهنده React شوند. افرادی که می خواهند مهارت های خود را به عنوان یک توسعه دهنده React تقویت کنند یا به دنبال افزایش مهارت های خود به عنوان یک توسعه دهنده فرانت اند هستند نیز از این دوره بهره مند خواهند شد.
شما باید قبل از یادگیری React یا هر فریم ورکی از جاوا اسکریپت در سطح متوسط دانش داشته باشید زیرا برخی از مفاهیم پیشرفته جاوا اسکریپت در اینجا استفاده می شوند. React مدرن را با ساخت 4 پروژه و مناسب برای توسعه دهندگان React مبتدی و متوسط بیاموزید * با React و Firebase 9 یک بازار خانه بسازید * با Redux Toolkit یک سیستم بلیط پشتیبانی MERN کامل بسازید.
سرفصل ها و درس ها
مقدمه دوره
Introduction to the Course
به دوره خوش آمدید
Welcome to the Course
React چیست
What is React
راه اندازی محیط
Environment Setup
مخازن کد
Code Repos
React Basics و JSX (JavaScript XML)
React Basics and JSX (JavaScript XML)
مقدمه ای بر پروژه بازخورد
Introduction to Feedback Project
برنامه React ایجاد کنید
Create React App
راه اندازی React
Initializing React
معرفی JSX
Intro to JSX
مقادیر و لیست های پویا در JSX
Dynamic Values and Lists in JSX
شرایط در JSX
Conditionals in JSX
اجزاء، لوازم، و حالت
Components, Props, and State
ایجاد اولین مؤلفه و لوازم جانبی شما
Creating Your First Component and Props
اضافه کردن سبک به یک کامپوننت
Adding Styles to a Component
حالت و استفاده ازState Hook
State and useState Hook
مدیریت دولت جهانی
Managing Global State
اجزای کارت و سبک های شرطی
Card Component and Conditional Styles
رویدادها و حفاری پایه
Events and Prop Drilling
مولفه و واکنش پذیری آمار بازخورد
Feedback Stats Component and Reactivity
فرم ها، اعتبارسنجی، و انیمیشن ساده
Forms, Validation, and Simple Animation
ورودی و حالت فرم
Form Input and State
کامپوننت دکمه سفارشی
Custom Button Component
اعتبار سنجی بلادرنگ
Real-Time Validation
رتبه بندی جزء را انتخاب کنید
Rating Select Component
افزودن بازخورد
Add Feedback
انیمیشن محو شدن با حرکت فریم
Fade Animation with Framer Motion
ایجاد مسیرها و پیوندها
Creating Routes and Links
ایجاد مسیرها (React Router 5)
Creating Routes (React Router 5)
ارتقا به React Router 6
Upgrading to React Router 6
ایجاد لینک (v5 و v6)
Creating Links (v5 and v6)
NavLink و useParams
NavLink and useParams
مسیریابی و مسیرهای تودرتو
Navigate and Nested Routes
Context API، useContext Hook و Deployment
Context API, useContext Hook, and Deployment
یک زمینه و ارائه دهنده ایجاد کنید
Create a Context and Provider
وضعیت جهانی را با useContext Hook دریافت کنید
Get Global State with the useContext Hook
انتقال توابع به متن
Moving Functions to Context
ویرایش رویداد بازخورد
Edit Feedback Event
عوارض جانبی با useEffect
Side Effects with useEffect
به روز رسانی مورد بازخورد
Update Feedback Item
در Netlify مستقر شوید
Deploy to Netlify
API ها و درخواست های HTTP
APIs and HTTP Requests
API ها و درخواست ها توضیح داده شده است
APIs and Requests Explained
راه اندازی JSON-Server Mock Backend
Setting Up JSON-Server Mock Backend
کلاینت و سرور را همزمان اجرا کنید
Run Client and Server with Concurrently
واکشی داده ها از JSON-Server Backend
Fetch Data from JSON-Server Backend
جزء اسپینر
Spinner Component
افزودن بازخورد و تنظیم یک پروکسی
Add Feedback and Setting a Proxy
به روز رسانی و حذف از JSON-Server
Update and Delete from JSON-Server
شروع پروژه GitHub Finder
GitHub Finder Project Start
معرفی پروژه GitHub Finder
Introduction to GitHub Finder Project
Tailwind و Daisy UI را تنظیم کنید
Set Up Tailwind and Daisy UI
کامپوننت نوار ناوبری
Navbar Component
کامپوننت پاورقی
Footer Component
صفحات و مسیرها
Pages and Routes
کار با GitHub API
Working with the GitHub API
GitHub API و Getting Token
GitHub API and Getting Token
جزء User List
UserList Component
در حال بارگذاری اسپینر
Loading Spinner
نمایش کاربران
Display Users
متن GitHub را تنظیم کنید
Set Up GitHub Context
کاهش دهنده ها و استفاده از Reducer Hook
Reducers and useReducer Hook
پاک کردن واکشی کاربران
Clean Up Fetch Users
جزء جستجوی کاربر
User Search Component
جستجوی کاربران
Search Users
پاک کردن کاربران
Clear Users
نمایه کاربر و هشدارها
User Profile and Alerts
زمینه هشدار و کاهش دهنده
Alert Context and Reducer
مؤلفه هشدار
Alert Component
دریافت کاربر مجرد
Get Single User
نمایه کاربر بالا
User Profile Top
آمار نمایه کاربر
User Profile Stats
Repos کاربر را دریافت کنید
Get User Repos
اقلام مخزن
Repo Items
Refactoring زمینه و اقدامات
Refactoring Context and Actions
SearchUsers را به فایل Actions منتقل کنید
Move SearchUsers to Actions File
getUser را به فایل Actions منتقل کنید
Move getUser to Actions File
پاکسازی اقدامات و Axios ما
Cleaning Up Our Actions and Axios
به Vercel مستقر شوید
Deploy to Vercel
قلابهای واکنش پیشرفتهتر
More Advanced React Hooks
معرفی بخش
Introduction to Section
useRef مثال 1 - ایجاد مرجع DOM
useRef Example 1 - Create DOM Reference
useRef مثال 2 - وضعیت قبلی را دریافت کنید
useRef Example 2 - Get Previous State
useRef مثال 3 - رفع خطای نشت حافظه
useRef Example 3 - Memory Leak Error Fix
نمایش نظرات